<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <script src="../js/jquery/jquery.js"></script>
    <script src="../js/jquery_mobile/jquery.mobile-1.4.2.js"></script>
    <link rel="stylesheet" href="../css/jquery_mobile/jquery.mobile-1.4.2.css"/>

    <link rel="stylesheet" href="../css/product_list/item_style.css"/>
    <link rel="stylesheet" href="../css/product_list/slide_item.css"/>
    <script type="text/javascript" src="../js/template/handlebars-v1.3.0.js"></script>

    <!--
        这个是模板方法对应的模板
    -->
    <script id="item-template" type="text/x-handlebars-template">
        {{#each products}}
        <li class="post-item" data-url="#">
            <!-- 标题 -->
            <h3 class="title">
                <a href="product_detail.html?product_id={{id}}" >{{name}}</a>
            </h3>
            <!-- 缩略图 -->
            <div class="thumb">
                <a href="#">
                    <img src="../pic/product_list/{{img}}">
                </a>
            </div>
            <!-- 文章简介 -->
            <p title="#">
                {{description}}
            </p>
        </li>
        {{/each}}
    </script>
    <script>

        $(function(){

            /**
             * 得到传递过来类别的值，再进行拉取数据
             **/
//            var index = window.location.href.lastIndexOf("=");
//            var category = window.location.href.substring(++index);

            //假设类别是50
            var category = 50;
            /**
             * 页面进来首先拉取几条数据
             **/
            formList(category);
            $(".btn-ajax").click(function(){
                formList(category);
            });

            function formList(category_id){
                var product_length = $("#tiles li").length;
                $.getJSON(
                        "../json/product_list.json",
                        {
                            "category.category_id":parseInt(category_id),
                            length:product_length
                        },
                        function(data, status) {
                            /**
                             * 服务器返回的是objec
                             * 转化成字符串后，再转换成jsonObject
                             **/
                            var strJson = JSON.stringify(data);
                            var dataObj=eval("("+strJson+")");

                            /**
                             *这里进行判断，返回的商品数量数组长度为0的时候，提示用户
                             */
                            if(dataObj.products.length ==0){
                                alert("加载到底了，没有更多了!");
                                $(".btn-ajax").text("没有更多了！");
                                $(".btn-ajax").click(function(){
                                    $(".btn-ajax").text("已经到底了！");
                                });
                                return;
                            }

                            var myTemplate = Handlebars.compile($("#item-template").html());
                            $("#tiles").append(myTemplate(dataObj));
                        });
            }

            function removeLiAndGet(id){
                $("#tiles li").remove();
                formList(id);
                $(".btn-ajax").click(function(){
                    formList(id);})
            }

            //点击侧边栏的商品的类别将进行数据刷新
            $(".nation-tour").click(function(){
                removeLiAndGet(1);
            });
            $(".outboard-tour").click(function(){
                removeLiAndGet(2);
            });
            $(".view-tour").click(function(){
                removeLiAndGet(3);
            });
            $(".special-tour").click(function(){
                removeLiAndGet(4);
            });

        });
    </script>
    <title>商品列表</title>
</head>
<body>
<div data-role="page" id="product-list">
    <!--顶部-->
    <header data-role="header" data-theme="b">
        <h1>商品列表</h1>
        <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-left ui-btn-icon-notext">返回</a>
        <a href="#pro_type" data-icon="gear" data-iconpos="notext"></a>
    </header>
    <!--侧边栏-->
    <div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" data-theme="a"
         id="pro_type">
        <ul data-role="listview">
            <li data-icon="delete"><a href="#" data-rel="close">关闭菜单</a></li>
            <li class="nation-tour">
                <div class="fast-nav-title">
                    <i class="fn-icon"></i>
                    <h3>国内游</h3>
                </div>
            </li>
            <li class="outboard-tour">
                <div class="fast-nav-title">
                    <i class="fn-icon"></i>
                    <h3>出境游</h3>
                </div>
            </li>
            <li class="view-tour">
                <div class="fast-nav-title">
                    <i class="fn-icon"></i>
                    <h3>港澳游</h3>
                </div>
            </li>
            <li class="special-tour">
                <div class="fast-nav-title">
                    <i class="fn-icon"></i>
                    <h3>游轮游</h3>
                </div>
            </li>
            <li class="div-tour">
                <div class="fast-nav-title">
                    <i class="fn-icon"></i>
                    <h3>自助游</h3>
                </div>
            </li>
        </ul>
    </div>
    <!--列表内容-->
    <div data-role="content" class="content" style="background: #F3F6F9;">
        <ul id="tiles" class="block-content">
        </ul>
        <button class="btn-ajax">点击加载更多</button>
    </div>
</div>
</body>
</html>